// components/WeatherChart/WeatherChart.js
var utils=require('../../utils/util.js')
let chart = null;
function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
    chart = new F2.Chart({
      el: canvas,       //如果未指定 id 时可以直接传入 canvas 对象
      width ,             //设置宽度
      height             //设置高度
      // pixelRatio: window.devicePixelRatio
    });
    return chart
  }

Component({
    /**
     * 组件的属性列表
     */
    properties: {
      weatherhours:{
        type:Object
      }
    },

    /**
     * 组件的初始数据
     */
    data: {
        opts: {
            onInit: initChart,
          },
          text:'',
          fromtitle:''
    },
    lifetimes:{
        ready(){ 
          wx.request({
            url: 'https://api.xygeng.cn/one',
            methods:'GET',
            success:res=>{
              this.setData({
                text:res.data.data.content,
                fromtitle:res.data.data.origin
              })
            }
          }) 
        }
    },
    observers:{
      'weatherhours':function(val){
        if(val.code!=undefined){
        this.derWeatherChart(val)
        }
      }
    },
    /**
     * 组件的方法列表
     */
    methods: {
      derWeatherChart(val){
          var data=[];
          var max=parseInt(val.hourly[0].temp)
          var min=parseInt(val.hourly[0].temp)
         val.hourly.forEach(element => {
          max=parseInt(element.temp)>max?parseInt(element.temp):max;
          min=parseInt(element.temp)<min?parseInt(element.temp):min;
            data.push({
              fxTime:utils.Fitime(element.fxTime),
              temp:parseInt(element.temp),
              text:element.text
            })
         });
         chart.clear()
         chart.source(data, {
          temp: {
            formatter:function formatter(ivalue){
              return ivalue+'℃'
            },
            ticks:[min-2,(max+min)/2,max+2]
          },
          fxTime: {
            tickCount: 5  //下边刻度
          }
        });
        chart.tooltip({
          showItemMarker:false,
          showCrosshairs:true,
          background:{
            radius:2,
            fill:'#7ba6d9',
            padding:[6 ,10]
          },
          onShow(ev){
            const { items } = ev;
            items[0].name = null;
            items[0].value = items[0].origin.fxTime+'：'+ items[0].origin.temp+'°'+items[0].origin.text;
          }
        });
        chart.axis('fxTime',{
          label:{
            fill:'#647dd3'
          }
        }),
        chart.axis('temp',{
          label:{
            fill:'#647dd3'
          }
        })
        chart.line().position('fxTime*temp').style({
          stroke: '#88d2fa'
        });
        chart.point().position('fxTime*temp').style({
          stroke: '#fff',
          lineWidth: 1
        });
        chart.render();
      }
    }
})
